<template>
    <div class="table-container">
        <div class="content-table">
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    height="450px"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    header-row-class-name="table-header">
                <el-table-column
                        label="姓名"
                        align="center">
                    <template slot-scope="scope">
                        <span class="user-name" @click="handleApplyParticipate(scope.row.userId)">{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="currentTitle"
                        label="现职称"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="finallyPost"
                        label="参评职称"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="postType"
                        label="参评岗位"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="业绩预警结果"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.postResult == 1">审核通过</span>
                        <span v-else>审核未通过</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="280"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button @click.stop="hanldeReviewsPreview(scope.row.userId)" type="primary" size="small" round>查看业绩</el-button>
                        <el-button :disabled="disabledBar" @click.stop="handleMove(scope.row.id)" type="primary" size="small" round>转移</el-button>
                        <el-button :disabled="disabledBar" @click.stop="handlePartici(scope.row.id,0)"
                                   v-if="scope.row.status == '1'"
                                   class="close-bar"
                                   type="primary" size="small"
                                   round>取消参评
                        </el-button>
                        <el-button  :disabled="disabledBar" @click.stop="handlePartici(scope.row.id,1)"
                                   v-else
                                   type="primary" size="small"
                                   round>进入参评
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
<!--        <div class="pagination">-->
<!--            <el-pagination-->
<!--                    background-->
<!--                    layout="total,prev, pager, next"-->
<!--                    @current-change="handleCurrentPage"-->
<!--                    :total="total"-->
<!--                    :current-page="pageNum">-->
<!--            </el-pagination>-->
<!--        </div>-->
    </div>
</template>

<script>
    import Qs from 'qs'
    import { participantsFindList,participantsMove,participation } from '@/service/api'
    export default {
        name: "compaleTable",
        data() {
            return {
                tableData: [],
                multipleSelection:[],
                pageNum: 1,
                total:0,
                params:{},
                disabledBar:false
            }
        },
        props:['tableParams','categoryId'],
        created() {
            console.log(this.tableParams)
            this.params = {
                categoryName: this.tableParams.categoryName,
                category: this.tableParams.category,
                type: this.tableParams.type,
                pageNum: 1,
                pageSize: 100
            };
            this.inits()
        },
        methods:{
            handleMove(id) { //转移
                console.log(id)
                let params = { id: id };
                participantsMove(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        this.inits()
                    } else {
                        console.log(res)
                    }
                });
            },
            inits(){
                participantsFindList(Qs.stringify(this.params)).then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        console.log(res)
                        this.tableData = res.data.page.list;
                        this.total = res.data.page.total;
                        // this.disabledBar = false;
                        // if(res.data.startTime !== ""){
                        //     if(new Date(res.data.startTime)<new Date()){
                        //         this.disabledBar = true
                        //     }
                        // }

                    } else {
                        console.log(res)
                    }
                });
            },
            handleCurrentPage(e) {
                this.params.pageNum = e;
                this.inits()
                // this.getQaStandardRecordFindList(e);
            },
            handlePartici(id,status) { // 进入参评
                let params = {
                    id: id,
                    status: status,
                    type:this.params.type
                };
                participation(Qs.stringify(params)).then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        this.inits()
                    } else {
                        console.log(res)
                    }
                });
            },
            tableRowClassName({row}) {
                if(row.status == '1'){
                    return 'warning-row';
                }
                return '';
            },
            handleApplyParticipate(userId) {
                this.$emit('handleApplyParticipate',userId);
            },
            hanldeReviewsPreview(userId){
                this.$emit('hanldeReviewsPreview',userId);
            }
        },
        mounted() {

        },
        watch:{
            'tableParams':{
                deep: true,
                handler:function(value) {   //特别注意，不能用箭头函数，箭头函数，this指向全局
                    this.params.categoryName = value.categoryName;
                    this.params.type = value.type;
                    this.inits()
                },
            },
            // categoryId(value){
            //    console.log(value)
            // }
        }
    }
</script>

<style scoped>
    .content-table{
        margin: 13px 25px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }
    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }
    /*.content-table >>>.disabled-selection .el-checkbox{*/
        /*position:relative;*/
        /*width: 100%;*/
        /*display: block;*/
        /*margin-left: 20px;*/
    /*}*/
    /*.content-table >>>.disabled-selection .el-checkbox:before{*/
        /*content:"全选";*/
        /*position:absolute;*/
        /*left:20px;*/
        /*font-weight: bold !important;*/
        /*color: #333;*/
    /*}*/
    .el-form{
        margin-top: 18px;
    }
    .content-table >>> .is-round{
        padding: 6px 15px;
    }
    .content-table >>>.el-table--small td{
        padding: 7px 0;
    }
    .pagination{
        margin-top: 10px;
        text-align: end;
        padding-right: 16px;
    }
    .content-table >>> .el-table .warning-row {
        background: #f4f7fa;
    }
    .content-table >>> .el-table__row:hover> td{
        background: none !important;
    }
    .content-table >>> .close-bar{
        background: #385cbd;
    }
    .content-table >>> .close-bar.is-disabled{
        color: #FFFFFF;
        background-color: #98a3c7;
        border-color: #98a3c7;
    }
    .user-name{
        cursor: pointer;
        /*color: #0000cc;*/
    }
</style>
